<template>
  <!-- 缴费模块 -->
  <div class="Paycost content-box">
    <h2 style="margin-bottom:20px"></h2>
    <div class="header">
      <el-form ref="form" :inline="true" class="demo-form-inline">
        <el-form-item label="应缴月份">
          <el-date-picker
            type="month"
            placeholder="选择日期"
            v-model="date"
            style="width: 100%;"
            size="mini"
            format="yyyy 年 MM 月"
            value-format="yyyy-MM"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click='getPayList' size="mini">查询</el-button>
          <el-button size="mini" @click="reSet">重置</el-button>
          <el-button size="mini" @click='exportFils'>导出</el-button>
        </el-form-item>
      </el-form>
    </div>
<!--     全选缴费区域 -->
    <div class="payalls ">
      <div class="left">
        <el-checkbox v-model='isIndeterminate'  @change="toSlctAll">全选</el-checkbox>
        <span class="num">已经选择:<i class="gent">{{ allItem }}</i>项</span>
        <span class="many">总计:<i class="gent">{{ allMoney }} 元</i></span>
      </div>
      <div class="right">
        <el-button type="warning" size="small" style="width:100px" @click="onpayCost">缴费</el-button>
      </div>
    </div>
    
    <!--    水费-->
    <div class="elscop" v-if='All.mrCostWaters'>
      <div class="title">
        <div class="left">
<!--          <el-checkbox v-model="allSelectItem_1" @change="toSlctAllItem(1)"></el-checkbox>-->
          <span>水费</span>
        </div>
        <div class="right">
          合计金额：
          <span>{{ All.waterTotalAmount }}元</span>
          <i class="el-icon-arrow-down" style="margin-left:30px;color:#888"></i>
        </div>
      </div>
      <el-table
        :header-cell-class-name="cellClass"
        fixed
        ref="multipleTable1"
        :data="All.mrCostWaters"
        tooltip-effect="dark"
        style="width: 100%"
        :toggleAllSelection="false"
        @selection-change="handleSelectionChange1"
        :header-cell-style="{ fontSize: '12px', backgroundColor: '#eee', fontWeight: '600' }"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="payCost" label="应缴月份" width="80">
          <!--   <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column prop="buildingType" label="房屋类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
            <span v-else>形象店</span>
          </template>
        </el-table-column>
        <el-table-column prop="ctContractProject" label="房屋编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="projectArea" label="面积(㎡)" width="100"></el-table-column>
        <el-table-column prop="meterStartPoint" label="上期读数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="privateElectricEndPoint" label="本期读数" width="100"></el-table-column>
        <el-table-column prop="meterTotalPoint" label="本月用量" show-overflow-tooltip></el-table-column>
        <el-table-column prop="costUnit" label="单价(元)" width="100"></el-table-column>
        <el-table-column prop="privateWaterMoney" label="费用(元)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="publicWaterUnit" label="公摊单价(元)" width="120"></el-table-column>
        <el-table-column prop="publicWaterUnit" label="公摊费用(元)" width="120"></el-table-column>
        <el-table-column prop="monthFee" label="小计(元)" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <!--    电费-->
    <div class="elscop" v-if='All.mrCostElectrics'>
      <div class="title">
        <div class="left">
<!--          <el-checkbox v-model="allSelectItem_2" @change="toSlctAllItem(2)"></el-checkbox>-->
          <span>电费</span>
        </div>
        <div class="right">
          合计金额：
          <span>{{ All.electricTotalAmount }}元</span>
          <i class="el-icon-arrow-down" style="margin-left:30px;color:#666"></i>
        </div>
      </div>
      <el-table
        :header-cell-class-name="cellClass"
        fixed
        ref="multipleTable2"
        :data="All.mrCostElectrics"
        tooltip-effect="dark"
        style="width: 100%"
        :toggleAllSelection="false"
        @selection-change="handleSelectionChange2"
        :header-cell-style="{ fontSize: '14px', backgroundColor: '#eee', fontWeight: '600' }"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="payCost" label="应缴月份" width="80">
          <!--   <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column prop="buildingType" label="房屋类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
            <span v-else>形象店</span>
          </template>
        </el-table-column>
        <el-table-column prop="ctContractProject" label="房屋编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="projectArea" label="面积(㎡)" width="100"></el-table-column>
        <el-table-column prop="buildingType" label="上期读数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="privateElectricEndPoint" label="本期读数" width="100"></el-table-column>
        <el-table-column prop="waterTotalPoint" label="本月用量" show-overflow-tooltip></el-table-column>
        <el-table-column prop="costUnit" label="单价(元)" width="100"></el-table-column>
        <el-table-column prop="privateWaterMoney" label="费用(元)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="publicWaterUnit" label="公摊单价(元)" width="120"></el-table-column>
        <el-table-column prop="publicWaterUnit" label="公摊费用(元)" width="120"></el-table-column>
        <el-table-column prop="monthFee" label="小计(元)" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <!--    管理费和租赁费集合-->
    <div class="elscop" v-if='All.ctCost'>
      <div class="title">
        <div class="left">
<!--          <el-checkbox v-model="allSelectItem_3" @change="toSlctAllItem(3)"></el-checkbox>-->
          <span>管理费和租赁费集合</span>
        </div>
        <div class="right">
          合计金额：
          <span>{{ All.ctCostTotalAmount }}元</span>
          <i class="el-icon-arrow-down" style="margin-left:30px;color:#888"></i>
        </div>
      </div>
      <el-table
        :header-cell-class-name="cellClass"
        fixed
        ref="multipleTable3"
        :data="All.ctCost"
        tooltip-effect="dark"
        style="width: 100%"
        :toggleAllSelection="false"
        @selection-change="handleSelectionChange3"
        :header-cell-style="{ fontSize: '14px', backgroundColor: '#eee', fontWeight: '600' }"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="payCost" label="应缴月份" width="140">
          <!--   <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column prop="buildingType" label="房屋类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
            <span v-else>形象店</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectNumber" label="房屋编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="projectArea" label="面积(㎡)" width="100"></el-table-column>
<!--        <el-table-column prop="buildingType" label="上期读数" show-overflow-tooltip></el-table-column>-->
<!--        <el-table-column prop="privateElectricEndPoint" label="本期读数" width="100"></el-table-column>-->
<!--        <el-table-column prop="waterTotalPoint" label="本月用量" show-overflow-tooltip></el-table-column>-->
        <el-table-column prop="projectUnitPrice" label="单价(元)" width="100"></el-table-column>
        <el-table-column prop="privateWaterMoney" label="费用(元)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="publicWaterUnit" label="公摊单价(元)" width="120"></el-table-column>
        <el-table-column prop="publicWaterUnit" label="公摊费用(元)" width="120"></el-table-column>
        <el-table-column prop="totalAmount" label="小计(元)" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <!--    停车费-->
    <div class="elscop" v-if='All.carCost'>
      <div class="title">
        <div class="left">
<!--          <el-checkbox v-model="allSelectItem_4" @change="toSlctAllItem(4)"></el-checkbox>-->
          <span>停车费</span>
        </div>
        <div class="right">
          合计金额：
          <span>{{ All.carCostTotalAmount }}元</span>
          <i class="el-icon-arrow-down" style="margin-left:30px;color:#888"></i>
        </div>
      </div>
      <el-table
        :header-cell-class-name="cellClass"
        fixed
        ref="multipleTable4"
        :data="All.carCost"
        tooltip-effect="dark"
        style="width: 100%"
        :toggleAllSelection="false"
        @selection-change="handleSelectionChange4"
        :header-cell-style="{ fontSize: '14px', backgroundColor: '#eee', fontWeight: '600' }"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="payCost" label="应缴月份" width="80">
          <!--   <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column prop="carCount" label="车辆数量" width="80">
<!--          <template slot-scope="scope">-->
<!--            <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>-->
<!--            <span v-else>形象店</span>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column prop="totalCarCost" label="停车费合计费用（元）" show-overflow-tooltip></el-table-column>
        <el-table-column prop="carCostIds" label="车辆id" width="100"></el-table-column>
<!--        <el-table-column prop="buildingType" label="上期读数" show-overflow-tooltip></el-table-column>-->
<!--        <el-table-column prop="privateElectricEndPoint" label="本期读数" width="100"></el-table-column>-->
<!--        <el-table-column prop="waterTotalPoint" label="本月用量" show-overflow-tooltip></el-table-column>-->
<!--        <el-table-column prop="ctContractProject" label="单价(元)" width="100"></el-table-column>-->
<!--        <el-table-column prop="privateWaterMoney" label="费用(元)" show-overflow-tooltip></el-table-column>-->
<!--        <el-table-column prop="publicWaterUnit" label="公摊单价(元)" width="120"></el-table-column>-->
<!--        <el-table-column prop="publicWaterUnit" label="公摊费用(元)" width="120"></el-table-column>-->
        <el-table-column prop="carCostTotalAmount" label="小计(元)" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <!--其他费用-->
    <div class="elscop" v-if='All.cOtherCost'>
      <div class="title">
        <div class="left">
<!--          <el-checkbox v-model="allSelectItem_5" @change="toSlctAllItem(5)"></el-checkbox>-->
          <span>其他费用</span>
        </div>
        <div class="right">
          合计金额：
          <span>{{ All.cOtherCostTotalAmount?All.cOtherCostTotalAmount:0 }}元</span>
          <i class="el-icon-arrow-down" style="margin-left:30px;color:#888"></i>
        </div>
      </div>
      <el-table
        :header-cell-class-name="cellClass"
        fixed
        ref="multipleTable5"
        :data="All.cOtherCost"
        tooltip-effect="dark"
        style="width: 100%"
        :toggleAllSelection="false"
        @selection-change="handleSelectionChange5"
        :header-cell-style="{ fontSize: '14px', backgroundColor: '#eee', fontWeight: '600' }"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="payCost" label="应缴月份" width="80">
          <!--   <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column prop="buildingType" label="房产类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
            <span v-else>形象店</span>
          </template>
        </el-table-column>
        <el-table-column prop="area" label="房产编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="buildingType" label="面积(㎡)" width="100"></el-table-column>
        <el-table-column prop="companyName" label="单价" show-overflow-tooltip></el-table-column>
        <el-table-column prop="companyNameId" label="税率" width="100"></el-table-column>
        <el-table-column prop="contractId" label="收费期间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="isPayment" label="小计(元)" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// import electrics from '../../../components/paycost/electrics'
export default {
  // components: {electrics},
  data() {
    return {
      multipleSelection:[],
      allMoney:0,        //总价
      isIndeterminate:false,   //全选数据绑定
      allItem:0,
      All: { },         // 表格数据
      date:"",          //时间筛选
      tabelList:[] ,     //所有表格数据集合
      companyId:'',
      allSelectItem_1:false,
      allSelectItem_2:false,
      allSelectItem_3:false,
      allSelectItem_4:false,
      allSelectItem_5:false,
      mrCostWaters:[],
      mrCostElectrics:[],
      ctCost:[],
      carCost:[],
      cOtherCost:[],
      totalNum:[0,0,0,0,0],
      totalMoney:[0,0,0,0,0],

      waterIds:[], 		//String[]	水费Ids			选填项（5项费用至少传1项）
      electricIds:[], 	         //String[]	电费Ids			选填项（5项费用至少传1项）
      ctCostIds:[],		          //String[]	租赁和管理费用Ids	选填项（5项费用至少传1项）
      cotherCostIds:[],	        //String[]	其他费用ids		选填项（5项费用至少传1项）
      carCostIds:[],
      //以下为传入下个页面的数据
      waterList:[],
      eleList:[],
      ctList:[],
      cOtherList:[],
      carList:[]
    }
  },
 
  created() {
    //var date = new Date();
    //let  month= date .getMonth()+1>10?date .getMonth()+1:'0'+(date .getMonth()+1);
    // this.date = `${date .getFullYear()}-${month}`;
    const USER_INFO = JSON.parse(window.localStorage.getItem('USER_INFO'));
    this.companyId = USER_INFO.data.data.companyId
    this.getPayList()
  },
  methods: {
    //全选函数
    toSlctAll(){
      if(this.All.mrCostWaters.length!==0){
        this.All.mrCostWaters.forEach(row => {
          this.$refs.multipleTable1.toggleRowSelection(row,this.isIndeterminate);
          console.log(row)
          this.waterList.push(row)
        });
      }
      if(this.All.mrCostElectrics.length!==0){
        this.All.mrCostElectrics.forEach(row => {
          this.$refs.multipleTable2.toggleRowSelection(row,this.isIndeterminate);
          this.eleList.push(row)
        });
      }
      if(this.All.ctCost.length!==0){
        this.All.ctCost.forEach(row => {
          this.$refs.multipleTable3.toggleRowSelection(row,this.isIndeterminate);
          this.ctList.push(row)
        });
      }
      if(this.All.carCost.length!==0){
        this.All.carCost.forEach(row => {
          this.$refs.multipleTable4.toggleRowSelection(row,this.isIndeterminate);
          this.carCostIds.push(row.carCostIds)
          this.carList.push(row)
        });
      }
      if(this.All.cOtherCost.length!==0){
        this.All.cOtherCost.forEach(row => {
          this.$refs.multipleTable5.toggleRowSelection(row,this.isIndeterminate);
          this.cotherCostIds.push(row.id)
          this.cOtherList.push(row)
        });
      }
      if(this.isIndeterminate===false){
        this.ctList=[]
        this.waterList=[]
        this.eleList=[]
        this.cOtherList=[]
        this.carList=[]
      }
    },
    // toSlctAllItem(index){
    //   this.isIndeterminate=this.allSelectItem_1&&this.allSelectItem_2&&this.allSelectItem_3&&this.allSelectItem_4&&this.allSelectItem_5
    //   this.$refs[`multipleTable${index}`].toggleAllSelection();//全选
    // },
    //每一项select值变化调用  返回值为选中的集合
    handleSelectionChange1(val){
      this.waterList=[]
      val.map(item=>{
        this.waterList.push(item)
      })
      this.totalNum[0]=val.length
      this.totalMoney[0]=val.reduce((prev,cur)=>{
        return cur.monthFee?prev+cur.monthFee:prev+0
      },0)
      this.allSelectItem_1=!!(this.mrCostWaters.length==val.length)
      this.handleSelectionChange(1,val);
    },
    handleSelectionChange2(val){
      this.eleList=[]
      val.map(item=>{
        this.eleList.push(item)
      })
      this.totalNum[1]=val.length
      this.totalMoney[1]=val.reduce((prev,cur)=>{
        return cur.monthFee?prev+cur.monthFee:prev+0
      },0)
      
      this.allSelectItem_2=!!(this.mrCostElectrics.length==val.length)
      this.handleSelectionChange(2,val);
    },
    handleSelectionChange3(val){
      this.ctList=[]
      val.map(item=>{
        this.ctList.push(item)
      })
      this.totalNum[2]=val.length
      this.totalMoney[2]=val.reduce((prev,cur)=>{
        return cur.totalAmount?prev+cur.totalAmount:prev+0
      },0)
      this.allSelectItem_3=!!(this.ctCost.length==val.length)
      this.handleSelectionChange(3,val);
    },
    handleSelectionChange4(val){
      this.carList=[]
      val.map(item=>{
        this.carList.push(item)
      })
      this.totalNum[3]=val.length
      this.totalMoney[3]=val.reduce((prev,cur)=>{
        return cur.totalCarCost?prev+cur.totalCarCost:prev+0
      },0)
      this.allSelectItem_4=!!(this.carCost.length==val.length)
      this.handleSelectionChange(4,val);
    },
    handleSelectionChange5(val){
      this.cOtherList=[]
      val.map(item=>{
        this.cOtherList.push(item)
      })
      this.totalNum[4]=val.length
      this.totalMoney[4]=val.reduce((prev,cur)=>{
        return cur.money?prev+cur.money:prev+0
      },0)
      this.allSelectItem_5=!!(this.cOtherCost.length==val.length)
      this.handleSelectionChange(5,val);
    },
    handleSelectionChange() {
      this.allItem= this.totalNum.reduce((prev,item)=>{
        return prev+item
      },0)
      this.allMoney= this.totalMoney.reduce((prev,item)=>{
        return prev+item
      },0).toFixed(2)
      let allcheck=this.allSelectItem_1&&this.allSelectItem_2&&this.allSelectItem_3&&this.allSelectItem_4&&this.allSelectItem_5
      if(allcheck){
        this.isIndeterminate=true
        this.toSlctAll();
      }
    },
    
    //初始化数据
    getPayList(){
      this.$http.get('/payments/paymentscost/select',
        {params:{companyId:this.companyId,paymentsTime:this.date}}
      ).then(res=>{
        this.All=res.data.data;
        let allData=res.data.data
        //水费集合 mrCostWaters
        //电费集合 mrCostElectrics
        //管理费和租赁费集合 ctCost
        //停车费数据 carCost
        //其他费用 cOtherCost
        this.mrCostWaters=allData.mrCostWaters||[]
        this.mrCostElectrics=allData.mrCostElectrics||[]
        this.ctCost=allData.ctCost||[]
        this.carCost=allData.carCost||[]
        this.cOtherCost=allData.cOtherCost||[]
        this.tabelList=[...allData.cOtherCost,...allData.carCost,...allData.ctCost,...allData.mrCostElectrics,...allData.mrCostWaters]
        console.log(this.All)
      })
    },
    //表格
    //去除表格第一行多选按钮
    cellClass(row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    },
    //重置
    reSet(){
      this.date=''
      this.getPayList()
    },
    //导出
    exportFils(){
      this.$message.success('导出成功')
    },
    // 缴费跳转
    onpayCost() {
      if(this.waterList.length===0 && this.eleList.length===0 && this.ctList.length===0 && this.carList.length===0 && this.cOtherList.length===0){
        return this.$message.error('请至少选择一条缴费类型')
      }
      console.log(Array.from(new Set(this.ctList)))
      this.$router.push({
        path:"/parkService/orderDetails",
        query:{
          // orderId: res.data.data.orderNumber,
          waterList:Array.from(new Set(this.waterList)),
          eleList:Array.from(new Set(this.eleList)),
          ctList:Array.from(new Set(this.ctList)),
          cOtherList:Array.from(new Set(this.cOtherList)),
          carList:Array.from(new Set(this.carList)),
          allMoney:this.allMoney
        }
      })
      // let data={
      //   companyId:'1616',		  //Integer  	公司ID  			必填项
      //   payCost:'',			  //String	    应缴月份			必填项
      //   waterIds:this.waterIds.toString(), 		//String[]	水费Ids			选填项（5项费用至少传1项）
      //   electricIds:this.electricIds.toString(), 	         //String[]	电费Ids			选填项（5项费用至少传1项）
      //   ctCostIds:this.ctCostIds.toString(),		          //String[]	租赁和管理费用Ids	选填项（5项费用至少传1项）
      //   cotherCostIds:this.cotherCostIds.toString(),	        //String[]	其他费用ids		选填项（5项费用至少传1项）
      //   carCostIds:this.carCostIds.toString()		         //String[]	停车费ids		选填项（5项费用至少传1项）
      // }
      // this.$http.get('/payments/paymentscost/payCost', { params:data }).then(res=>{
      //   if(res.data.code===0){
      //
      //     this.$router.push({
      //       path:"/parkService/orderDetails",
      //       query:{
      //         orderId: res.data.data.orderNumber,
      //         selectData:this.nextPageArr
      //       }
      //     })
      //   }
      // })
    }
  }
}
</script>

<style scoped lang="less">
@import './paycost.less';
</style>


